<template>
  <div class="modules">
    <div class="group" :key="i" v-for="(t,i) in modules">
      <div class="label">
        {{ t.title }}
      </div>
      <div class="module">
        <DraggableModule :component="k" :key="m" v-for="(k, m) in t.components"></DraggableModule>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import DraggableModule from "./DraggableModule.vue";

const modules = [
  {
    title:'布局容器',
    components: [
      { type:'box', label: '普通容器', icon: 'icon-a-ziyuan35' },
      { type:'boxrow', label:'行容器', icon:'icon-a-ziyuan35' },
      { type:'boxcol', label:'列容器', icon:'icon-m-lierongqi' },
      { type:'tabs', label:'标签页', icon:'icon-biaoqianye' },
    ]
  },
  {
    title:'数据展示',
    components: [
      { type:'calendar', label:'日历', icon:'icon-rili' },
      { type:'carousel', label:'走马灯', icon:'icon-lunbotuguanli' },
      { type:'Collapse', label:'折叠面板', icon:'icon-zhediemianban' },
      { type:'image', label:'图片', icon:'icon-tupian' },
      { type:'statistic', label:'统计数值', icon:'icon-tongji' },
      { type:'timeline', label:'时间轴', icon:'icon-timeAxis' },
      { type:'alert', label:'警告', icon:'icon-tishi' }
    ]
  },
  {
    title:'数据录入',
    components: [

    ]
  }
]

</script>

<style scoped lang="less">
  .modules {
    width: 100%;
    .group {
      width: 100%;
      margin-top: 10px;
      .label {
        width: 100%;
        padding: 10px;
        font-size: 15px;
        font-weight: 800;
        border-top:1px solid #eeeff3;
        border-bottom: 1px solid #eeeff3;
      }
      .module {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
</style>
